<template>
    <el-container>
        <el-main>
            <el-table :data="tableData" stripe element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" v-loading.fullscreen.lock="loading">
                <el-table-column prop="orderId" label="编号" width="60" />
                <el-table-column prop="username" label="客户名称" width="90" />
                <el-table-column prop="head" label="头像" width="112">
                    <template #="{ head }">
                        <Avatar :src="head" />
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机号码" width="120" />
                <el-table-column prop="zsName" label="预约诊所" width="120" />
                <el-table-column prop="ysName" label="预约医生" width="80" />
                <el-table-column prop="orderTime" label="预约时间" width="180" />
                <el-table-column prop="orderAddr" label="预约的位置" />
                <el-table-column prop="createTime" label="创建时间" width="180" />
                <el-table-column prop="status" label="状态" width="80">
                    <template #="{ status }">
                        <el-tag v-if="status == '0'">待预约</el-tag>
                        <el-tag v-if="status == '1'">已预约</el-tag>
                        <el-tag v-if="status == '4'">已取消</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #="{ status, orderMu, orderTime }">
                        <UpdateOrderButton :hasCancle="status == '1'" :showUpdate="() => showUpdate(orderMu, orderTime)" :doCancel="() => doCancel(orderMu)" />
                    </template>
                </el-table-column>
            </el-table>
            <SearchPagination :currentPage="currentPage" :total="total" :limit="limit" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" />
        </el-main>
        <el-footer>
            <UpdateOrder :orderTime="orderTime" :change="(value) => (this.orderTime = value)" :showUpdateForm="showUpdateForm" :doUpdate="doUpdate" :hideUpdateForm="() => (this.showUpdateForm = false)" />
        </el-footer>
    </el-container>
</template>

<script>
import UpdateOrderButton from '@/app/components/order/UpdateOrderButton';
import UpdateOrder from '@/app/components/order/UpdateOrder';

import { page } from '@/chaos/functions/mixin/crud';
import { updateOrder } from '@/app/components/order/mixin/updateOrder';

export default {
    name: 'userbookcount',
    mixins: [page, updateOrder],
    components: { UpdateOrderButton, UpdateOrder },
    data() {
        return {
            domain: 'iya_order'
        };
    },
    created() {
        this.data.userMu = this.$route.params.mu;
        this.searchMethod = 'ordersByUserMu';
        this.search();
    }
};
</script>
<style scoped></style>
